<template>
	<view class="flipbook-viewport" ref="flipbookViewport" :rect="rect" :change:rect="updateRenderData" postMessage="postMessage">
		<view class="container">
			<view class="flipbook">
				<view v-for="(item,index) in imgUrl" :key="item.index" :style="`background-image:url(${item})`">
					<view v-if="index != 0" class="gradient"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			rect() {
				return {
					width: this.width,
					height: this.height,
					fileUrl: this.fileUrl,
					isInitOk: this.isInitOk
				}
			}
		},
		data() {
			return {
				width: uni.getSystemInfoSync().windowWidth,
				height: uni.getSystemInfoSync().windowHeight + 'px',
				fileUrl: null,
				imgUrl: [],
				isInitOk: false
			}
		},
		onLoad() {
			this.height = uni.getSystemInfoSync().windowHeight + 'px'
			
			// this.imgUrl = JSON.parse(uni.getStorageSync("imgArr"))
			// setTimeout(()=>{
			// 	this.isInitOk = true
			// },500)
			
			this.fileUrl = "http://demo2.sibetech.cn:9001/houhui_api/resource/downloadFile?path=/files/gF/a9/gFbKfJa9.pdf"
		},
		methods:{
			onViewArr(op){
				this.imgUrl = op.arr
				const container = this.$refs['flipbookViewport'];
				if (container) {
					// 调用renderjs中的方法
					this.$nextTick(()=>{
						this.$forceUpdate();
						setTimeout(()=>{
							this.isInitOk = true
						},500)
					})
				}
			}
		}
	}
</script>
<script lang="renderjs" module="turnjs">
	import '@/utils/jquery-1.7.min.js';
	import turn from '@/utils/turn.js';
	
	// 引入PDF.js
	import pdfjsLib from '@/utils/pdfjs-dist/build/pdf';
	import pdfjsWorker from "@/utils/pdfjs-dist/build/pdf.worker.entry";
	pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
	
	export default {
		data() {
			return {
				width: '',
				height: '',
				fileUrl:'',
				imgArr: []
			}
		},
		methods: {
			async init(){
				this.imgArr = await this.convertPDFToImage(this.fileUrl)
				await this.postMessage()
			},
			//推送信息到视图
			postMessage(e,ownerInstance){
				this.$ownerInstance.callMethod('onViewArr',{
					arr: this.imgArr
				})
			},
			async convertPDFToImage(pdfUrl) {
				console.log("进入");
			  // 加载PDF文档
			  const loadingTask = pdfjsLib.getDocument(pdfUrl);
			  const pdf = await loadingTask.promise
			  let pages = [];
			  for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
			    // 获取页面
			    const page = await pdf.getPage(pageNum);
			    // 获取视口
			    const viewport = page.getViewport(1);
					viewport.width = uni.getSystemInfoSync().windowWidth / 1.6
					viewport.height = uni.getSystemInfoSync().windowHeight * 1.3
					
					// const devicePixelRatio = window.devicePixelRatio || 1;
					// console.log(devicePixelRatio);
					// console.log(viewport);
					// viewport.width = viewport.width * devicePixelRatio
					// viewport.height = viewport.height * devicePixelRatio
			    // 创建canvas元素
			    const canvas = document.createElement('canvas');
			    const context = canvas.getContext('2d');

			    canvas.height = viewport.height;
			    canvas.width = viewport.width;
					
			    const renderContext = {
			      canvasContext: context,
			      viewport: viewport
			    };
			    // 渲染页面
			    await page.render(renderContext).promise;
					
			    // 转换canvas为图片
			    const imgData = canvas.toDataURL('image/jpeg', 1);
			 
			    // 将图片数据推送到数组中
			    pages.push(imgData);
			  }
			 
			  // 返回所有页面的图片数组
			  return pages;
			},
			updateRenderData(newVal, oldVal) {
				let {
					width,
					height,
					fileUrl,
					isInitOk
				} = newVal;
				this.width = width;
				this.height = height;
				this.fileUrl = fileUrl;
				if(fileUrl && this.imgArr.length == 0){
					this.init()
				}
				//图片加载完毕
				if(isInitOk){
					console.log("啊啊啊");
					this.onTurn()
				}
			},
			onTurn() {
				$(".flipbook").turn({
						acceleration: true,
						// autoCenter: true,
						display: 'double',
						// display: 'single',
						height: this.height,
						width: this.width,
						elevation: 600,
						gradients: true,
						// threshold: 0.7,
						when: {
							turned: function(e, page) {
								/*console.log('Current view: ', $(this).turn('view'));*/
							},
						},
					})
					.on("last", function(event) {
						// alert("当前为最后一页");
					})
					.on("click", function(event) {
						$(this)
							.turn(event.offsetX < $(this).height() >>> 1 ? "previous" : "next")
					})
			}
		}
	}
</script>
<style lang="scss">
	.father {
		position: relative;
	}

	.fixed {
		position: fixed;
		width: 100%;
		height: 100%;
		/* top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1; */
	}

	.abs {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}

	.flipbook-viewport {
		overflow: hidden;
		width: 100%;
		height: 100%;

		.container {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 auto;
		}

		.flipbook ::v-deep .page {
			background-color: white;
			background-repeat: no-repeat;
			background-position: center;
			background-size: contain;

			-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
			-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
			-ms-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
			-o-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

			img {
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				margin: 0;
			}
		}
		
		.flipbook ::v-deep .even .gradient{
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
			background-image:url(../../static/right-border.png);
			background-position:right top;
			background-repeat: repeat-y;
		}
		
		.flipbook ::v-deep .odd .gradient{
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
			background-image:url(../../static/left-border.png);
			background-position:left top;
			background-repeat: repeat-y;
		}
		
		.flipbook .page-wrapper{
			-webkit-perspective:2000px;
			-moz-perspective: 2000px;
			-ms-perspective: 2000px;
			perspective: 2000px;
		}

		.shadow {
			-webkit-transition: -webkit-box-shadow 0.5s;
			-moz-transition: -moz-box-shadow 0.5s;
			-o-transition: -webkit-box-shadow 0.5s;
			-ms-transition: -ms-box-shadow 0.5s;

			-webkit-box-shadow: 0 0 20px #ccc;
			-moz-box-shadow: 0 0 20px #ccc;
			-o-box-shadow: 0 0 20px #ccc;
			-ms-box-shadow: 0 0 20px #ccc;
			box-shadow: 0 0 20px #ccc;
		}
	}
</style>